<div title="External Page" id="jquiexternal"  >
This is content loaded from an external page.  There will be a div created, but we will force a reload 
Random # <span id='mytest'></span>


<div class="fieldcontain">
                    <label for="theme">Theme</label>
                    <select name="theme" id="theme" class="changes">
                        <option value="default">Default</option>
                        <option value="android">Android</option>
	<option value="android-ics light">Android ICS Light</option>
	<option value="android-ics">Android ICS</option>
	<option value="ios">iOS</option>
	<option value="jqm">Jquery Mobile</option>
	<option value="sense-ui">Sense UI</option>
	<option value="wp light">Windows Phone Light</option>
	<option value="wp">Windows Phone</option>
	<!--Themes-->
                    </select>
                </div>
                <div class="fieldcontain">
                    <label for="mode">Mode</label>
                    <select name="mode" id="mode" class="changes">
                        <option value="scroller">Scroller</option>
                        <option value="clickpick">Clickpick</option>
                        <option value="mixed">Mixed</option>
                    </select>
                </div>
                <div class="fieldcontain">
                    <label for="display">Display</label>
                    <select name="display" id="display" class="changes">
                        <option value="modal">Modal</option>
                        <option value="inline">Inline</option>
                        <option value="bubble">Bubble</option>
                        <option value="top">Top</option>
                        <option value="bottom">Bottom</option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="language">Language</label>
                    <select name="language" id="language" class="changes">
                        <option value="">English</option>
                        <!--Lang-->
                    </select>
                </div>
                <div class="fieldcontain">
                    <label for="demo">Demo</label>
                    <select name="demo" id="demo" class="changes">
                        <option value="date" selected>Date</option>
	<option value="datetime" >Datetime</option>
	<option value="time" >Time</option>
	<option value="select" >Select</option>
	<option value="image_text" >Image & Text</option>
	<option value="tree_list" >Tree List</option>
	
                    </select>
                </div>
                <div class="fieldcontain">
                    <label for="test_default">Click here to try</label>
                    <input type="text" name="test_default" id="test_default" />
                </div>
                <div data-role="fieldcontain" class="demos fieldcontain" id="demo_select">
                    <label for="test_select" class="ui-input-text">Click here to try</label><select id="test_select" class="demos" data-role="none"><option value="">Please Select</option><option value="1">Atlanta</option><option value="2">Berlin</option><option value="3">Boston</option><option value="4">Chicago</option><option value="5">London</option><option value="6">Los Angeles</option><option value="7">New York</option><option value="8">Paris</option><option value="9">San Francisco</option></select> 
                </div>
	            <div data-role="fieldcontain" class="demos fieldcontain" id="demo_image_text">
                    <label for="test_image_text_dummy">Click here to try</label><ul id="test_image_text"><li><div class="car"><div class="img-cont"><img src="http://mobiscroll.com/Content/img/BMW_logo.png"></div><span>BMW</span></div></li><li><div class="car"><div class="img-cont"><img src="http://mobiscroll.com/Content/img/Dacia_logo.png"></div><span>Dacia</span></div></li><li><div class="car"><div class="img-cont"><img src="http://mobiscroll.com/Content/img/Ferrari_logo.png"></div><span>Ferrari</span></div></li><li><div class="car"><div class="img-cont"><img src="http://mobiscroll.com/Content/img/Mercedes_logo.png"></div><span>Mercedes</span></div></li><li><div class="car"><div class="img-cont"><img src="http://mobiscroll.com/Content/img/Opel_logo.png"></div><span>Opel</span></div></li><li><div class="car"><div class="img-cont"><img src="http://mobiscroll.com/Content/img/Renault_logo.png"></div><span>Renault</span></div></li><li><div class="car"><div class="img-cont"><img src="http://mobiscroll.com/Content/img/Volkswagen_logo.png"></div><span>Volkswagen</span></div></li></ul>  
                </div>
	<div data-role="fieldcontain" class="demos fieldcontain" id="demo_tree_list">
        <label for="test_tree_list_dummy">
            Click here to try</label><ul id="test_tree_list">
                <li>Germany</li><li>Great Britain</li><li>USA<ul>
                    <li>Georgia<ul>
                        <li>Atlanta</li><li>Augusta</li><li>Columbus</li><li>Savannah</li><li>Athens</li><li>
                            Sandy Springs</li><li>Macon</li><li>Roswell</li><li>Albany</li><li>Johns Creek</li><li>
                                Warner Robins</li><li>Alpharetta</li><li>Marietta</li><li>Valdosta</li><li>Smyrna</li><li>
                                    Brookhaven</li><li>Dunwoody</li><li>Mableton</li><li>Rome</li><li>Martinez</li><li>Peachtree
                                        City</li><li>Gainesville</li><li>East Point</li></ul>
                    </li>
                    <li>Massachusetts<ul>
                        <li>Agawam</li><li>Amesbury</li><li>Attleboro</li><li>Barnstable</li><li>Beverly</li><li>
                            Boston</li><li>Braintree</li><li>Bridgewater</li><li>Brockton</li><li>Cambridge</li><li>
                                Chelsea</li></ul>
                    </li>
                    <li>New York<ul>
                        <li>Albany</li><li>Amsterdam</li><li>Auburn</li><li>Batavia</li><li>Beacon</li><li>Binghamton</li><li>
                            Buffalo</li><li>Canandaigua</li><li>Cohoes</li><li>Corning</li><li>Cortland</li><li>
                                Dunkirk</li><li>Elmira</li>
                                <li>Massachusetts<ul>
                        <li>Agawam</li><li>Amesbury</li><li>Attleboro</li><li>Barnstable</li><li>Beverly</li><li>
                            Boston</li><li>Braintree</li><li>Bridgewater</li><li>Brockton</li><li>Cambridge</li><li>
                                Chelsea</li></ul>
                    </li>
                                </ul>
                    </li>
                    <ul>
                </li>
            </ul>
    </div>

<script>
window.setTimeout(function(){
$("#mytest").html(Math.floor(Math.random()*11))
},10);

        $(function () {
            var curr = new Date().getFullYear();
            var opt = {

            }

            opt.date = {preset : 'date'};
	opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
	opt.time = {preset : 'time'};
	opt.select = {preset : 'select'};
	opt.image_text = {preset : 'list', labels: ['Cars']};
	opt.tree_list = {preset : 'list', labels: ['Country', 'State', 'City']};

            
            $('select.changes').bind('change', function() {
                var demo = $('#demo').val();
                $(".demos").hide();
                if (!($("#demo_"+demo).length))
                    demo = 'default';

                $("#demo_" + demo).show();
                $('#test_'+demo).val('').scroller('destroy').scroller($.extend(opt[$('#demo').val()], { theme: $('#theme').val(), mode: $('#mode').val(), display: $('#display').val(), lang: $('#language').val() }));
            });

            $('#demo').trigger('change');
        });
    </script>
</div>